import React, { Component } from 'react';
import { Row, Col, Card, Tabs, DatePicker } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import numeral from 'numeral';
import styles from './Analysis.less';
import SalesBar from './SalesBar';

const { RangePicker } = DatePicker;
const { TabPane } = Tabs;

const rankingListData = [];
rankingListData.push(
  ...[
    {
      title: '上海',
      total: 323234,
    },
    {
      title: '西安',
      total: 323234,
    },
    {
      title: '北京',
      total: 323234,
    },
    {
      title: '广州',
      total: 323234,
    },
    {
      title: '深圳',
      total: 323234,
    },
    {
      title: '温州',
      total: 323234,
    },
  ]
);

class SalesCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentKey: '1',
    };
  }

  handleChangeTotalCargo = key => {};

  render() {
    const { rangePickerValue, isActive, handleRangePickerChange, loading, selectDate } = this.props;
    const { currentKey } = this.state;
    return (
      <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
        <div className={styles.salesCardContent}>
          <Tabs
            tabBarExtraContent={
              <div className={styles.salesExtraWrap}>
                <div className={styles.salesExtra}>
                  <a className={isActive('today')} onClick={() => selectDate('today')}>
                    <FormattedMessage id="app.analysis.all-day" defaultMessage="All Day" />
                  </a>
                  <a className={isActive('week')} onClick={() => selectDate('week')}>
                    <FormattedMessage id="app.analysis.all-week" defaultMessage="All Week" />
                  </a>
                  <a className={isActive('month')} onClick={() => selectDate('month')}>
                    <FormattedMessage id="app.analysis.all-month" defaultMessage="All Month" />
                  </a>
                  <a className={isActive('year')} onClick={() => selectDate('year')}>
                    <FormattedMessage id="app.analysis.all-year" defaultMessage="All Year" />
                  </a>
                </div>
                <RangePicker
                  value={rangePickerValue}
                  onChange={handleRangePickerChange}
                  style={{ width: 256 }}
                  className={styles.rangePick}
                />
              </div>
            }
            size="large"
            tabBarStyle={{ marginBottom: 24 }}
          >
            <TabPane
              tab={<FormattedMessage id="app.analysis.sales" defaultMessage="Sales" />}
              key="sales"
            >
              <Row>
                <Col xl={16} lg={12} md={12} sm={24} xs={24}>
                  <div className={styles.salesBar}>
                    <SalesBar height={295} id="bar1" />
                  </div>
                </Col>
                <Col xl={8} lg={12} md={12} sm={24} xs={24}>
                  <div className={styles.salesRank}>
                    <Tabs defaultActiveKey={currentKey} onChange={this.handleChangeTotalCargo}>
                      <TabPane tab="发货" key="1">
                        <ul className={styles.rankingList}>
                          {rankingListData.map((item, i) => (
                            <li key={item.title}>
                              <span
                                className={`${styles.rankingItemNumber} ${
                                  i < 3 ? styles.active : ''
                                }`}
                              >
                                {i + 1}
                              </span>
                              <span className={styles.rankingItemTitle} title={item.title}>
                                {item.title}
                              </span>
                              <span className={styles.rankingItemValue}>
                                {numeral(item.total).format('0,0')}
                              </span>
                            </li>
                          ))}
                        </ul>
                      </TabPane>
                      <TabPane tab="收货" key="2">
                        <ul className={styles.rankingList}>
                          {rankingListData.map((item, i) => (
                            <li key={item.title}>
                              <span
                                className={`${styles.rankingItemNumber} ${
                                  i < 3 ? styles.active : ''
                                }`}
                              >
                                {i + 1}
                              </span>
                              <span className={styles.rankingItemTitle} title={item.title}>
                                {item.title}
                              </span>
                              <span className={styles.rankingItemValue}>
                                {numeral(item.total).format('0,0')}
                              </span>
                            </li>
                          ))}
                        </ul>
                      </TabPane>
                    </Tabs>
                  </div>
                </Col>
              </Row>
            </TabPane>
            <TabPane
              tab={<FormattedMessage id="app.analysis.visits" defaultMessage="Visits" />}
              key="views"
            >
              <Row>
                <Col xl={16} lg={12} md={12} sm={24} xs={24}>
                  <div className={styles.salesBar}>
                    <SalesBar height={295} id="bar2" />
                  </div>
                </Col>
                <Col xl={8} lg={12} md={12} sm={24} xs={24}>
                  <div className={styles.salesRank}>
                    <Tabs defaultActiveKey={currentKey} onChange={this.handleChangeTotalCargo}>
                      <TabPane tab="发货" key="1">
                        <ul className={styles.rankingList}>
                          {rankingListData.map((item, i) => (
                            <li key={item.title}>
                              <span
                                className={`${styles.rankingItemNumber} ${
                                  i < 3 ? styles.active : ''
                                }`}
                              >
                                {i + 1}
                              </span>
                              <span className={styles.rankingItemTitle} title={item.title}>
                                {item.title}
                              </span>
                              <span className={styles.rankingItemValue}>
                                {numeral(item.total).format('0,0')}
                              </span>
                            </li>
                          ))}
                        </ul>
                      </TabPane>
                      <TabPane tab="收货" key="2">
                        <ul className={styles.rankingList}>
                          {rankingListData.map((item, i) => (
                            <li key={item.title}>
                              <span
                                className={`${styles.rankingItemNumber} ${
                                  i < 3 ? styles.active : ''
                                }`}
                              >
                                {i + 1}
                              </span>
                              <span className={styles.rankingItemTitle} title={item.title}>
                                {item.title}
                              </span>
                              <span className={styles.rankingItemValue}>
                                {numeral(item.total).format('0,0')}
                              </span>
                            </li>
                          ))}
                        </ul>
                      </TabPane>
                    </Tabs>
                  </div>
                </Col>
              </Row>
            </TabPane>
          </Tabs>
        </div>
      </Card>
    );
  }
}

export default SalesCard;
